<template>
  <div id='temp'>
	  <!--图片分类  -->
	  
	  <div class="catagory">
			<ul v:bind="{style:'width:'+totalWidth+'px'}">
				<li  @click="getAllimgs(0)">全部</li>
				<li @click="getAllimgs(item.id)" v-for="(item,index) in list1" :key="index">{{item.title}}</li>
			</ul>
	  </div>
	  <!--图片展示  -->
	   <vue-loading v-if='isshowing' type="bars" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading>
	  <div class="imglist">
		<ul>
			<li v-for="(item,index) in list" :key="index">
				<router-link v-bind="{to:'/photo/photoinfo/'+item.id}"> 
					<img v-lazy="item.img_url">  
					<div class='desc'>
						<h5 v-text="item.title"></h5>
						<p v-text="item.zhaiyao"></p>
					</div>
				</router-link> 
			</li>
		</ul>
	  </div>
  </div>
</template>
<script>
	import { Toast } from 'mint-ui';
	import common from "../../kits/common.js";
	//导入实现loadding的子组件
	import vueLoading from 'vue-loading-template';
	export default {
	components:{
			vueLoading,
		},
	data () {
		return {
			totalWidth:320,//默认ul宽度为320px
			list1:[],//分类数据
			list:[],//图片数据
			isshowing:true
			};
		},
		created(){
			this.getimglist();
			//加载图片
			//加载所有图片
			var all=0;
			this.getAllimgs(all);
		},
		methods:{
			getimglist(){
				var url=common.apidomain+'/api/getimgcategory';
				this.$http.get(url).then(function(res){
					var data=res.body;
					if(data.status!=0){
						Toast(data.message);
						return;
					}
					this.list1=data.message;
					var w=62;
					var count=data.message.length;
					this.totalWidth=w*(count+1);

				})
			},
			getAllimgs(catagoryId){
				catagoryId=catagoryId||0;
				var url=common.apidomain+'/api/getimages/'+catagoryId;
				this.$http.get(url).then(function(res){
					this.isshowing=false;
					var body=res.body;
					if(body.status!=0){
						Toast(body.message);
						return;
					}
					this.list=body.message;
				})
			}
		},

	}
</script>

<style scoped>
	.catagory li,.imglist li{
		display:inline-block;
		list-style: none;
	}
	.catagory{
		width: 320px;
		max-width:320px;
		overflow-x: auto;
	}
	.catagory ul{
		
		width:1000px;
		padding-left:10px;
		margin:0;
		
	}
	.catagory ul li{
		padding:5px;
		color:#0094ff;
		font-size:14px;
		cursor:pointer;
	}
	image[lazy=loading] {
		width: 40px;
		height: 300px;
		margin: auto;
	}
	.imglist ul{
		padding:0px;
	}
	.imglist ul li{
		position:relative;
		width: 100%;
		
	}


	.imglist img{
		width: 100%;
		height: 300px;
	}
	.desc{
		position:absolute;
		width: 100%;
		background-color: rgba(0,0,0,.4);	
		padding:0 5px; 
		bottom:0;
		left:0;
		
	}
	.desc p,.desc h5{
		color:white;
		width: 100%;
	}
	
</style>